<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#/home">首页</a> | <a href="#/about">关于我们</a> |
    <button onclick="history.back()">返回</button> | <button onclick="location.hash='#/home'">首页</button>
    <div id="pages">   
        <div id="home">
            <h1>首页内容</h1>
        </div>
        <div id="about">
            <h1>关于我们</h1>
        </div>
    </div>
    <script>
        let router = [{path:"/home", component:"home"},{path:"/about", component:"about"}]
        
        document.addEventListener("DOMContentLoaded",()=>switchPage());
        window.addEventListener("hashchange",()=>switchPage())
        function switchPage(){
            let hash = location.hash.substr(1)||"/home";
            console.log(hash);
            router.forEach(item=>{
                if(item.path==hash){
                    let pages = document.querySelectorAll("#pages>div");
                   
                    Array.from(pages).forEach(page=>page.style.display="none");
                    document.querySelector("#"+item.component).style.display="block";
                    return;
                }
            })
        }
    </script>

</body>
</html>